import { Tabs } from 'expo-router';
import React from 'react';
import { Platform } from 'react-native';

import { HapticTab } from '@/components/HapticTab';
import { IconSymbol } from '@/components/ui/IconSymbol';
import TabBarBackground from '@/components/ui/TabBarBackground';
import { Colors } from '@/constants/Colors';
import { useColorScheme } from '@/hooks/useColorScheme';
import Entypo from '@expo/vector-icons/Entypo';
import Fontisto from '@expo/vector-icons/Fontisto';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
const Stack = createNativeStackNavigator();
import HomeDetail from '../home-detail';
// 定义 tabBarIcon 参数的类型
interface TabBarIconProps {
  color: string;
  size?: number;
}
function TabLayout() {
  const colorScheme = useColorScheme();

  return (
    <Tabs
      screenOptions={{
        tabBarActiveTintColor: Colors[colorScheme ?? 'light'].tint,
        headerShown: false,
        tabBarButton: HapticTab,
        tabBarBackground: TabBarBackground,
        tabBarStyle: Platform.select({
          ios: {
            // Use a transparent background on iOS to show the blur effect
            position: 'absolute',
          },
          default: {},
        }),
      }}>
      <Tabs.Screen
        name="index"
        options={{
          title: '首页',
          tabBarIcon: ({ color }: TabBarIconProps) => <IconSymbol size={28} name="house.fill" color={color} />,
        }}
      />
      <Tabs.Screen
        name="explore"
        options={{
          title: '分类',
          tabBarIcon: ({ color }: TabBarIconProps) => <Entypo name="list" size={28} color={color} />,
        }}
      />
      <Tabs.Screen
        name="setting"
        options={{
          title: '中心',
          tabBarIcon: ({ color }: TabBarIconProps) => <Fontisto name="player-settings" size={28} color={color} />,
        }}
      />
    </Tabs>
  );
}
const AppNavigator = () => {
  return (
    // <NavigationContainer>
    <Stack.Navigator>
      <Stack.Screen name="Tabs" component={TabLayout} options={{ headerShown: false }} />
      <Stack.Screen name="HomeDetail" component={HomeDetail} options={{ title: 'Home Detail' }} />
    </Stack.Navigator>
    // </NavigationContainer>
  );
};
export default AppNavigator;